<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

   <div id="app"></div>

   <script src="../../js/react.development.js"></script>
   <script src="../../js/react-dom.development.js"></script>
   <script src="../../js/babel.min.js"></script>


    <script type="text/babel">

    
        class App extends React.Component{
            // state = {}  默认
            state={name:'',age:18,gender:1}  //默认替换
            state1={name:'',age:18,gender:1}

            handleClick=async ()=>{
                
                this.setState({learn:'java'},()=>{
                    console.log(this.state);
                })

                // this.setState({name:'lisi'})
                // this.setState({age:21})
                // this.setState({gender:0})

                // this.setState({name:'lisi',age:21})
                
            }

            handleClick1=async ()=>{
            
                // this.setState1({name:'lisi'})
                // this.setState1({age:21})
                // this.setState1({gender:0})

                this.setState1({name:'lisi',age:21})
                
            }

            // 思路： 改变值 * 触发render
            setState1=(newState)=>{
                //修改state1 数据: {}+ {name:'',age:18,gender:1} + {name:'lisi'}=>{name:'lisi',age:18,gender:1}
                // 数据合并 ： Object.assign(target,...source)  源数据 合并到目标数据 ,返回值就是合并后结果
                let obj = Object.assign({},this.state1,newState)

                //替换值
                this.state1 = obj

                // 触发render
                this.forceUpdate()
            }


            render(){
                console.log('render');
                return (
                    <div>
                        <h1>name：{this.state.name}</h1>
                        <h1>age：{this.state.age}</h1>
                        <h1>gender：{this.state.gender===1?'boy':'girl'}</h1>
                        <button onClick={this.handleClick}>click</button>

                        <h1>name：{this.state1.name}</h1>
                        <h1>age：{this.state1.age}</h1>
                        <h1>gender：{this.state1.gender===1?'boy':'girl'}</h1>
                        <button onClick={this.handleClick1}>click1</button>
                    </div>
                    )
            }
        }

          

        ReactDOM.render(<App />,document.getElementById('app'))
    </script>
</body>
</html>